<template>
  <div class="experience-level">
    <page-header title="评价列表">
      <page-search :config="searchConfig" :model="searchModel"  @search="getData"></page-search>
    </page-header>
    <el-table :data="tableData" :cell-class-name="setCellClassName">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :min-width="column.minWidth"
        :label="column.label">
        <template slot-scope="{ row }">
          <div v-if="column.prop === 'commentUserName'" class="align-center">
            <el-avatar  :size="42" :src="row.commentUserAvatar"></el-avatar>
            <span class="pl-8">{{row.commentUserName}}</span>
          </div>
          <template v-else>{{row[column.prop]}}</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="80px">
        <template slot-scope="{ row }">
          <action-text @click="showDetail(row)">详情</action-text>
          <action-text @click="toggleStatus(row)" v-if="row.status === 1">显示</action-text>
          <action-text @click="toggleStatus(row)" v-else type="danger">隐藏</action-text>
        </template>
      </el-table-column>
    </el-table>
    <page-pagination
      :pageSize="pageSize"
      :currentPage="pageNum"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <detailDialog
      ref="dialog"
      :detail="detailData"
      :detailItems="columns"
    />
  </div>
</template>
<script>
import { getCommentList, updateComment } from '@/api/course';
import paginationMixin from '@/mixins/pagination';
import detailDialog from './dialog';

export default {
  data() {
    return {
      tableData: [],
      isCreate: false,
      searchConfig: [
        {
          type: 'input',
          label: '订单号',
          prop: 'orderNo',
        },
        {
          type: 'select',
          label: '状态',
          prop: 'valid',
          options: [
            { label: '全部', value: '' },
            { label: '已隐藏', value: 0 },
            { label: '正常', value: 1 },
          ],
        },
      ],
      searchModel: {
        orderNo: '',
        valid: '',
      },
      columns: [
        { prop: 'orderNo', label: '订单号', minWidth: '100px' },
        { prop: 'courseName', label: '课程', minWidth: '120px' },
        { prop: 'tagName', label: '评价标签', minWidth: '100px' },
        { prop: 'content', label: '评价内容', minWidth: '160px' },
        { prop: 'commentUserName', label: '评价用户', minWidth: '120px' },
        { prop: 'createTime', label: '评价时间', minWidth: '100px' },
        { prop: 'valid', label: '状态', minWidth: '80px' },
      ],
      detailData: {},
    };
  },
  components: {
    detailDialog,
  },
  mixins: [paginationMixin],
  methods: {
    setCellClassName({ column }) {
      if (column.property === 'commentUserName') {
        return 'image-cell';
      }
      return '';
    },
    showDetail(row) {
      this.detailData = row;
      this.$refs.dialog.dialogVisible = true;
    },
    async toggleStatus(row) {
      await updateComment({
        commentId: row.id,
      });
      await this.getData();
    },
    async getData() {
      const result = await getCommentList(this.searchParams);
      const { total, list } = result;
      this.total = total;
      this.tableData = list && list.map((item) => {
        const {
          createTime, tagList, valid, pictureUrl,
        } = item;
        const pictureList = pictureUrl ? pictureUrl.split(',') : [];
        return {
          ...item,
          tagName: tagList.map((item) => item.name).join('，'),
          valid: valid ? '展示' : '隐藏',
          createTime: this.$formatTime(createTime),
          pictureList,
        };
      });
    },
  },
  async created() {
    await this.getData();
  },
};
</script>
